import 'package:ducafe_ui_core/ducafe_ui_core.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import '../home/home_page.dart';
import '../question/question_page.dart';
import '../profile/profile_page.dart';
import '../chat/chat_page.dart';

/// 主导航界面
class VamosMainInterface extends StatefulWidget {
  const VamosMainInterface({super.key});

  @override
  State<VamosMainInterface> createState() => _VamosMainInterfaceState();
}

class _VamosMainInterfaceState extends State<VamosMainInterface> {
  int _activeTabIndex = 0;

  final List<Widget> _interfaceList = [
    const VamosHomeInterface(),
    const VamosQuestionInterface(),
    const VamosChatInterface(),
    const VamosProfileInterface(),
  ];

  Widget _buildNavItem(
    int index,
    String normalIcon,
    String selectedIcon,
    String title,
  ) {
    final isSelected = _activeTabIndex == index;

    return GestureDetector(
      onTap: () => setState(() => _activeTabIndex = index),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 400),
        curve: Curves.easeOutCubic,
        padding: EdgeInsets.symmetric(
          horizontal: isSelected ? 16.w : 12.w,
          vertical: 8.h,
        ),
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment(0.00, 0.35),
            end: Alignment(1.00, 1.00),
            colors: [
              isSelected ? const Color(0xFF83BE4A) : Colors.transparent,
              isSelected ? const Color(0xFFF3E3C6) : Colors.transparent,
              isSelected ? const Color(0xFFFB894E) : Colors.transparent,
            ],
          ),
          borderRadius: BorderRadius.circular(24.r),
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            AnimatedScale(
              scale: isSelected ? 1.0 : 1.0,
              duration: const Duration(milliseconds: 300),
              curve: Curves.easeOutBack,
              child: AnimatedSwitcher(
                duration: const Duration(milliseconds: 250),
                transitionBuilder: (Widget child, Animation<double> animation) {
                  return FadeTransition(
                    opacity: animation,
                    child: ScaleTransition(scale: animation, child: child),
                  );
                },
                child: Image.asset(
                  isSelected ? selectedIcon : normalIcon,
                  width: 28.w,
                  height: 28.w,
                  key: ValueKey(
                    isSelected ? 'selected_$index' : 'normal_$index',
                  ),
                  color: isSelected ? Colors.black : Colors.white,
                ),
              ),
            ),
            AnimatedSize(
              duration: const Duration(milliseconds: 350),
              curve: Curves.easeOutCubic,
              child:
                  isSelected
                      ? Container(
                        margin: EdgeInsets.only(left: 10.w),
                        child: AnimatedOpacity(
                          opacity: 1.0,
                          duration: const Duration(milliseconds: 200),
                          child: AnimatedSlide(
                            offset:
                                isSelected
                                    ? Offset.zero
                                    : const Offset(-0.5, 0),
                            duration: const Duration(milliseconds: 300),
                            curve: Curves.easeOutCubic,
                            child: Text(
                              title,
                              style: TextStyle(
                                color: isSelected ? Colors.black : Colors.white,
                                fontSize: 16.sp,
                                fontFamily:
                                    GoogleFonts.alexandria(
                                      fontWeight: FontWeight.w400,
                                    ).fontFamily,
                                fontWeight: FontWeight.w400,
                                letterSpacing: 0.5,
                              ),
                            ),
                          ),
                        ),
                      )
                      : const SizedBox.shrink(),
            ),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          IndexedStack(index: _activeTabIndex, children: _interfaceList),
          Positioned(
            left: 16.w,
            right: 16.w,
            bottom: 34.h,
            child: Center(
              child: SizedBox(
                width: 343.w,
                height: 68.h,
                child: Container(
                  decoration: BoxDecoration(
                    image: const DecorationImage(
                      image: AssetImage('assets/images/navigation_bg.png'),
                      fit: BoxFit.fill,
                    ),
                  ),
                  padding: EdgeInsets.only(bottom: 6.h),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      _buildNavItem(
                        0,
                        'assets/images/home.png',
                        'assets/images/home_selected.png',
                        'Home',
                      ),
                      _buildNavItem(
                        1,
                        'assets/images/question.png',
                        'assets/images/question_selected.png',
                        'Q&A',
                      ),
                      _buildNavItem(
                        2,
                        'assets/images/chat.png',
                        'assets/images/chat_selected.png',
                        'Message',
                      ),
                      _buildNavItem(
                        3,
                        'assets/images/profile.png',
                        'assets/images/profile_selected.png',
                        'Page',
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
